<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 父组件给子组件传参 是通过自定义属性的方式 直接加在子组件的标签上 -->
        <component-a :t="1" :list="list"></component-a>
        <component-a t="另外的选择" :num="100"></component-a>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 首先父(vm实例)里面存放了一个变量title,然后它v-bind:t="title"给了这个title变量
        // 这个t是我自定义的属性，然后他就可以直接加在外地子组件的标签上
        // 一个子组件 接受父组件的传递来的数据，通过props（property） 
        var ComponentA = {
            name: "ComponentA", // 方便开发工具来显示组件名称，把名称和组件的注册名一致
            props: {
                t: {
                    type: [String,Number],// 对props类型的限制, 必须指定的构造函数、类型名称
                    required: true //required是必须的，默认false,如果html结构里没有改属性就会报相应的错误

                },
                list: {
                    type: Array,
                    default(){
                        return ["橘子","芒果","西瓜"]
                    }
                   
                },
                list1:{
                    type: Object,
                    default: { message: 'hello',lll: "vue" }
                    
                },
                num: {
                    type: Number,
                    required: false,
                    default: 0,
                    validator(val){
                        return val>=0&&val<=80
                    }
                }
            },//不要直接改这个里面的数据
            template: `<div>{{msg}}<br>{{num}}<br>
                            {{t}}
                            <ul>
                                <li v-for="item in list">{{item}}</li>
                            </ul>
                            <ul>
                                <li v-for="(item1,key) in list1">{{key}}</li>
                            </ul>
                        </div>`,
            data(){
                return{
                    msg: "组件A"
                }
            },
            created(){
                // props中父组件传过来的数据，子组件直接通过 this[属性名]来使用
                console.log(this["t"]);
                 // 还可以在子组件中 通过$props  来获取父组件传过来的所有的props值
                console.log(this.$props)

            }
        }
        // vm实例
        var vm = new Vue({
            el: "#app",
            data: {
                title: "今天吃什么",
                list: ["泡面","麻辣烫","鸡公煲"]

            },
            components: {
                // componentA实例，父与子的关系
                ComponentA
            }
        })
    </script>
</body>
</html>